<template>
	<view class="answer-detail">
		<!-- 医生信息 -->
		<view class="answer-detail-doctor-info">
			<image class="answer-detail-doctor-info-left" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
			<view class="answer-detail-doctor-info-right">
				<view class="answer-detail-doctor-info-name">
					<text>曹雨声</text>
					<text>动物医院院长</text>
				</view>
				<view class="answer-detail-doctor-info-number">执业编号：A012938790087</view>
			</view>
		</view>
		<!-- 问答时间 -->
		<view class="answer-detail-time">07月21日 00:15</view>
		<!-- 聊天列表 -->
		<view class="answer-chat-list">
			<view class="answer-chat-item answer-chat-item-left">
				<view class="answer-chat-top">
					<image class="answer-chat-head" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
					<text>188****8226</text>
				</view>
				<view class="answer-chat-bottom">
					<view class="answer-chat-content">
						症状描述：猫咪5个月大，晚上睡觉时躺着闭嘴，呼吸急促，鼻子干。当天晚上喝水较多，晚餐冻干鸡肉搭配羊奶晚餐冻干鸡晚餐冻干鸡肉搭配羊奶晚餐冻干鸡晚餐鸡肉搭配羊奶晚餐冻干鸡晚餐鸡肉搭配羊奶晚餐冻干鸡晚餐鸡肉搭配羊奶晚餐冻干鸡晚餐
					</view>
					<!-- 显示图片 -->
					<view class="answer-chat-image-list">
						<image class="answer-chat-image-item" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
						<image class="answer-chat-image-item" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
						<image class="answer-chat-image-item" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
					</view>
					<!-- 图片不显示 -->
					<!-- 	<view class="answer-chat-tiXing">
						<icon class="icon-TIXING"></icon>
						<text>为保护用户隐私不显示图片</text>
					</view> -->
				</view>
			</view>
			<view class="answer-chat-item answer-chat-item-right">
				<view class="answer-chat-top">
					<text>188****8226</text>
					<image class="answer-chat-head" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
				</view>
				<view class="answer-chat-bottom">
					<view class="answer-chat-content">
						症状描述：猫咪5个月大，晚上睡觉时躺着闭嘴，呼吸急促，鼻子干。当天晚上喝水较多，晚餐冻干鸡肉搭配羊奶晚餐冻干鸡晚餐冻干鸡肉搭配羊奶晚餐冻干鸡晚餐鸡肉搭配羊奶晚餐冻干鸡晚餐鸡肉搭配羊奶晚餐冻干鸡晚餐鸡肉搭配羊奶晚餐冻干鸡晚餐
					</view>
				</view>
			</view>
			<view class="answer-chat-item answer-chat-item-right">
				<view class="answer-chat-top">
					<text>188****8226</text>
					<image class="answer-chat-head" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
				</view>
				<view class="answer-chat-bottom">
					<view class="answer-chat-content">
						症状描述：猫咪5个月大，晚上睡觉时躺着闭嘴，呼吸急促，鼻子干。当天晚上喝水较多，晚餐冻干鸡肉搭配羊奶晚餐冻干鸡晚餐冻干鸡肉搭配羊奶晚餐冻干鸡晚餐鸡肉搭配羊奶晚餐冻干鸡晚餐鸡肉搭配羊奶晚餐冻干鸡晚餐鸡肉搭配羊奶晚餐冻干鸡晚餐
					</view>
				</view>
			</view>
		</view>
		<!-- 温馨提示 -->
		<view class="answer-warm-prompt">温馨提示：医生给出的建议，仅适用于当前病例</view>
		<!-- 结束图片 -->
		<end-img />
		<!-- 底部 -->
		<view class="doctor-detail-bottom">
			<button class="doctor-detail-share" open-type="share">
				<icon class="icon-FENGXIANG"></icon>
				<text>分享</text>
			</button>
			<button class="doctor-detail-btn" @click="seleteType">免费提问</button>
		</view>
		<!-- 弹出框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-list">
				<button class="popup-item" open-type="contact">在线问诊</button>
				<view class="popup-item" @click="toGraphic">图文问诊</view>
				<view class="popup-cancel" @click="cancelType">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import EndImg from '@/components/endImg/endImg.vue';
export default {
	components: {
		EndImg
	},
	data() {
		return {};
	},
	methods: {
		// 免费提问
		seleteType() {
			this.$refs.popup.open();
		},
		// 取消
		cancelType() {
			this.$refs.popup.close();
		},
		// 跳转图文问诊
		toGraphic() {
			this.cancelType();
			uni.navigateTo({
				url: `/pagesHome/graphicInquiry/graphicInquiry`
			});
		}
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
@import '@/static/css/public.scss';
.answer-detail {
	padding: 32rpx 32rpx 180rpx;
	.answer-detail-doctor-info {
		display: flex;
		align-items: center;
		padding-bottom: 32rpx;
		margin-bottom: 32rpx;
		position: relative;
		&::before {
			content: '';
			width: 98%;
			height: 2rpx;
			background: #f1f1f1;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		.answer-detail-doctor-info-left {
			width: 116rpx;
			height: 116rpx;
			background: #dcdddd;
			border-radius: 16rpx;
			margin-right: 24rpx;
		}
		.answer-detail-doctor-info-right {
			flex: 1;
			.answer-detail-doctor-info-name {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;
				& > text:nth-of-type(1) {
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					line-height: 50rpx;
					margin-right: 20rpx;
				}
				& > text:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
				}
			}
			.answer-detail-doctor-info-number {
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
			}
		}
	}
	.answer-detail-time {
		font-size: 24rpx;
		color: #999999;
		line-height: 28rpx;
		margin-bottom: 24rpx;
		text-align: center;
	}
	.answer-chat-list {
		margin-bottom: 40rpx;
		.answer-chat-item {
			display: flex;
			flex-direction: column;
			margin-bottom: 24rpx;
			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}
			.answer-chat-top {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				.answer-chat-head {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
				& > text {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin: 0 12rpx;
				}
			}
			.answer-chat-bottom {
				padding: 24rpx;
				border-radius: 16rpx;
				.answer-chat-content {
					font-size: 24rpx;
					line-height: 44rpx;
				}
				.answer-chat-tiXing {
					display: flex;
					align-items: center;
					font-size: 22rpx;
					color: #999999;
					line-height: 32rpx;
					margin-top: 16rpx;
					.icon-TIXING {
						width: 24rpx;
						height: 14rpx;
						background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-baohuys.png) no-repeat;
						background-size: cover;
						margin-right: 16rpx;
					}
				}
				.answer-chat-image-list {
					display: flex;
					flex-wrap: wrap;
					margin-top: 16rpx;
					justify-content: space-between;
					.answer-chat-image-item {
						width: 174rpx;
						height: 112rpx;
						margin-bottom: 10rpx;
						&:nth-last-of-type(-n + 3) {
							margin-bottom: 0;
						}
					}
					&::after {
						content: '';
						width: 174rpx;
						height: 0px;
						visibility: hidden;
					}
				}
			}
		}
		.answer-chat-item-left {
			align-items: flex-start;
			.answer-chat-bottom {
				background: #f1f1f1;
				color: #333333;
			}
		}
		.answer-chat-item-right {
			align-items: flex-end;
			.answer-chat-bottom {
				background: #34d1a9;
				color: #ffffff;
			}
		}
	}
	.answer-warm-prompt {
		width: 100%;
		height: 76rpx;
		background: #f1f1f1;
		border-radius: 16rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 76rpx;
		text-align: center;
	}
}
</style>
